<template>
  <div>
    <h3 class="menu-title">管理中心</h3>
    <el-menu
      :unique-opened="false"
      :default-openeds="openAll"
      class="menu"
      router
    >
      <el-sub-menu index="/tmo" v-if="isMenuVisible('/tmo')">
        <template #title>
          <el-icon><coin /></el-icon>
          <span>租户管理</span>
        </template>
        <el-menu-item index="/tmo/tenants" v-if="isMenuVisible('/tmo/tenants')"
          >租户列表
        </el-menu-item>
        <el-menu-item
          index="/tmo/licenses"
          v-if="isMenuVisible('/tmo/licenses')"
          >许可管理
        </el-menu-item>
      </el-sub-menu>
      <el-sub-menu index="/apm" v-if="isMenuVisible('/apm')">
        <template #title>
          <el-icon><sell /></el-icon>
          <span>应用管理</span>
        </template>
        <el-menu-item index="/apm/apps" v-if="isMenuVisible('/apm/apps')"
          >应用列表
        </el-menu-item>
        <el-menu-item index="/apm/comps" v-if="isMenuVisible('/apm/comps')"
          >组件管理
        </el-menu-item>
        <el-menu-item index="/apm/menus" v-if="isMenuVisible('/apm/menus')"
          >菜单管理
        </el-menu-item>
        <el-menu-item index="/apm/roles" v-if="isMenuVisible('/apm/roles')"
          >角色管理</el-menu-item
        >
      </el-sub-menu>
      <el-sub-menu index="/cam" v-if="isMenuVisible('/cam')">
        <template #title>
          <el-icon><open /></el-icon>
          <span>访问管理</span>
        </template>
        <el-menu-item index="/cam/users" v-if="isMenuVisible('/cam/users')"
          >用户管理</el-menu-item
        >
        <el-menu-item index="/cam/groups" v-if="isMenuVisible('/cam/groups')"
          >用户组</el-menu-item
        >
        <el-menu-item index="/cam/licenses" v-if="isMenuVisible('/cam/licenses')"
          >许可列表</el-menu-item
        >
      </el-sub-menu>
      <el-sub-menu index="/edm" v-if="isMenuVisible('/edm')">
        <template #title>
          <el-icon><FolderOpened /></el-icon>
          <span>公共资料</span>
        </template>
        <el-menu-item index="/edm/regions" v-if="isMenuVisible('/edm/regions')"
          >行政区域</el-menu-item
        >
      </el-sub-menu>
      <el-sub-menu index="/mdm" v-if="isMenuVisible('/mdm')">
        <template #title>
          <el-icon><OfficeBuilding /></el-icon>
          <span>企业主数据</span>
        </template>
        <el-menu-item index="/mdm/orgs" v-if="isMenuVisible('/mdm/orgs')"
          >组织管理</el-menu-item
        >
        <el-menu-item index="/mdm/employees" v-if="isMenuVisible('/mdm/employees')"
          >人员管理</el-menu-item
        >
      </el-sub-menu>
    </el-menu>
  </div>
</template>

<script setup>
import { onMounted, ref, getCurrentInstance } from "vue";

// import { useRouter } from 'vue-router';
// const router = useRouter();
const instance  = getCurrentInstance();
const openAll = ref(["/tmo", "/apm", "/cam","/edm","/mdm"]);
console.log(instance);
const privileges = instance.appContext.config.globalProperties.$menus;



function isMenuVisible(index) {
  for (let i = 0; i < privileges.length; i++) {
    if (privileges[i].startsWith(index)) {
      return true;
    }
  }
  return false;
}
</script>

<style scoped>
.el-sub-menu.is-opened.data-v-3b3b3b3b {
  max-height: 250px;
  height: 250px;
  overflow-y: auto;
}
:deep(.el-menu) {
  /* padding: 5px; */
  /* width: 100%; */
  /* width: 80%; */
  /* min-height: 80vh; */
  background-color: white;
  /* padding: 1rem; */
  border-radius: 8px;
  box-shadow: 0 0 0px rgba(0, 0, 0, 0.1);
  max-height: 80vh; /* 设置最大高度 */
  overflow-y: auto; /* 超出部分显示滚动条 */
}
.menu-title {
  background-color: white;
  margin: 0 0;
  font-size: 16px;
  font-weight: 500;
  padding-left: 20px;
}
.el-menu-vertical {
  height: 90vh; /* 根据实际需求调整高度 */
  overflow-y: auto;
}
</style>
